<template>
    <div class="wrap">
        <van-form @submit="onSubmit">
           <van-field
                name="village"
                label="小区"
                readonly
                @click="villagePicker=true"
                :value="village"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择小区' }]" />
                <van-field
                    name="yezhuname"
                    readonly
                    :value="yezhuname"
                    label="选择业主"
                    placeholder="点击选择"
                    :rules="[{ required: true, message: '请选择业主' }]" 
                    @click="selyezhu" />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                提交
                </van-button>
            </div>
        </van-form>
        <van-popup v-model="villagePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="villageList"
                @confirm="villageConfirm"
                @cancel="villagePicker = false"
            />
        </van-popup> 
        <van-popup position="left" :style="{ height: '100%',width:'60%' }" v-model="yezhu">
           <van-search
            v-model="name"
            show-action
            label=""
            placeholder="请输入业主名"
            @search="onSearch"
            >
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
            </van-search>
            <van-radio-group style="padding-left:10px" @change="selChange" v-model="radio">
                <van-radio style="margin-top:6px" :key="index" v-for="(item,index) in yezhuList" :name="item.openId" icon-size="24px">{{item.name}}({{item.phone}})</van-radio>
                
            </van-radio-group>
            <van-button @click="sureye" style="position:absolute;bottom:0;" block type="primary">确定选择</van-button>
        </van-popup>
    </div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from '../api/tiandan.js'
    export default {
        data: function () {
            return {
                yezhuname:'',
                yezhuList:[],
                name:'',
                radio:'',
                yezhu:false,
                village:'',
                uploader:[],
                uploader1:[],
                uploader2:[],
                fileList:[],
                fileList1:[],
                communityId:'',           
                villagePicker:false,
                villageList:[],
                village:''
            }
        },
        components: {
           
        },
        created(){
            if(this.$route.query.village){
                this.village=this.$route.query.villages
            }
            if(this.$route.query.villages){
                this.communityId=this.$route.query.village
                this.villages=this.$route.query.village
            }
            this.getVillage()
        },
        mounted() {
           
        },
        methods: {
            sureye(){
                for(let i=0;i<this.yezhuList.length;i++){
                    if(this.radio===this.yezhuList[i].openId){   
                        this.yezhuname=this.yezhuList[i].name 
                    }
                }
                this.yezhu=false;
            },
            selChange(val){
                
            },
            selyezhu(){
                if(!this.communityId){
                    Toast('请选择业主所在小区');
                    return
                }
                this.yezhu=true
            },
            onSearch() {
                this.getYezhu()
            },
            getYezhu(){
                let that=this
                if(!this.name){
                    Toast('请填写姓名');
                    return
                }
                let obj={
                    communityId:this.communityId,
                    name:this.name
                }
               api.getYezhu(obj).then(e=>{
                  if(e.code==200){
                     if(!e.data.length){
                        Toast('没有业主可选择')
                     }
                      that.yezhuList=e.data
                  }
               }).catch(err=>{
                   console.log(err)
               }) 
            },
            getVillage(){
               let that=this 
               api.getVillage().then(e=>{
                   if(e.code==200){
                        that.villageList=e.data.map(item=>{
                            item.text=item.name
                            return item
                        })
                   }
                  
                  
               }).catch(err=>{
                   console.log(err)
               })
            },
          


            villageConfirm(val){
                this.communityId=val.id
                this.village=val.text
                this.villagePicker=false
            },
           onSubmit(val){
               let that=this
               let obj={
                   communityId:this.communityId,
                   visitorOpenId:openid,
                    ownerOpenId:this.radio
               }
                
                Dialog.confirm({
                    title: '已确认提交？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    Toast.loading({
                        duration:0,
                        message: '系统正在采集信息',
                        forbidClick: true,
                    });
                    api.add(obj).then(e=>{
                        Toast.clear()
                        if(e.code===200){
                            Dialog.alert({
                                title: '提示',
                                message: '已提交访问申请，请勿重复提交',
                            }).then(() => {
                           
                            });
                            that.$router.push('/historytiandan')
                            Notify({ type: 'success', message: '录入成功' });
                        }
                    }).catch(err=>{
                        console.log()
                    })
                })
                .catch((err) => {
                    console.log(err)
                });
               
           }
        }
    }
</script>

<style scoped lang="scss">
@import "../common.scss";
  .wrap{
      font-size:px2rem(9px)
  }

</style>
